﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>租房网 - 发布房屋信息</title>
		<link rel="stylesheet" href="/static/css/style.css">
        <link rel="stylesheet" href="/static/css/head.css">
	</head>
	<body>
		<div id="header" class="wrap">
			<div id="logo">
				<img src="/static/images/logo.png" width="160" height="40">
			</div>
			<div id="headbar">
				<a href="login.html">用户登录</a>
				<a href="register.html">快速注册</a>
				<div class="pub">
					<a href="publish.html">发布房源</a>
				</div>
			</div>
		</div>
		<div id="regLogin" class="wrap">
			<div class="dialog">
				<dl class="clearfix">
					<dt>新房屋信息发布</dt>
					<dd class="past">填写房屋信息</dd>
				</dl>
				<div class="box">
					<form action="" method="post" enctype="multipart/form-data">
						<div class="infos">
							<table class="field">
								<tr>
									<td class="field">标 题：</td>
									<td><input type="text" class="text" name="title"></td>
								</tr>
								<tr>
									<td class="field">户 型：</td>
									<td>
										<select class="text" name="type" id="housetype">
											<option value="0">请选择</option>
										</select>
								   </td>
								</tr>
								<tr>
									<td class="field">面 积：</td>
									<td><input type="number" class="mtext" name="area"></td>
								</tr>
								<tr>
									<td class="field">楼 层：</td>
									<td>
										<input type="number" class="stext" name="floor" maxlength="3">
										/
										<input type="number" class="stext" name="totalfloor" maxlength="3">
									</td>
								</tr>
								<tr>
									<td class="field">朝向：</td>
									<td><input type="number" class="mtext" name="direction"></td>
								</tr>
								<tr>
									<td class="field">价 格：</td>
									<td>
										<input type="number" class="mtext" name="price">
										<input type="hidden" name="priceunit" value="元/月">
									</td>
								</tr>
		                        <tr>
									<td class="field">省市区：</td>
									<td>	
										<select id="prov" class="text">
											<option value="0">请选择</option>
										</select>
										<select id="city" class="text">
											<option value="0">请选择</option>
										</select>
										<select id="dist" class="text" name="district">
											<option value="0">请选择</option>
										</select>
		                            </td>
								</tr>
								<tr>
									<td class="field">街 道：</td>
									<td>
										<input type="text" name="street" class="text">
									</td>
								</tr>
								<tr>
									<td class="field">楼 盘：</td>
									<td>
										<input type="text" name="estate" class="text">
									</td>
								</tr>
								<tr>
									<td class="field">其 他：</td>
									<td>
										<input type="checkbox" name="hassubway">地铁
										<input type="checkbox" name="isshared">支持合租
										<input type="checkbox" name="hasagentfees">中介费
									</td>
								</tr>
								<tr>
									<td class="field">上传图片：</td>
									<td>
										<input id="file" type="file" class="text" name="mainphoto">
										<input id="addbutton" type="button" value="+" class="addbutton">
									</td>
								</tr>
								<tr>
									<td class="field">图片预览：</td>
									<td id="prevArea">
										<img id="housePhoto" src="/static/images/upload_photo.png" alt="请选择图片" width="160" height="120">
									</td>
								</tr>
		                        <tr>
									<td class="field">详细信息：</td>
									<td><textarea name="detail"></textarea></td>
								</tr>
							</table>
							<div class="buttons"><input type="submit" value="立即发布"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div id="footer" class="wrap">
			<dl>
				<dt>&copy; 北京千锋互联科技有限公司 版权所有</dt>
				<dd>京ICP备12003911号-3 京公网安备11010802011455号</dd>
				<dd>关于千锋 · 联系我们 · 意见反馈 · 帮助中心</dd>
			</dl>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript">
			let photoIds = []
			let timerId = 0
			$(function() {
				$('#addbutton').on('click', function() {
					var tr = $(this).parent().parent()
					var img = $('<img src="/static/images/upload_photo.png">').attr('width', 160).attr('height', 120)
					$('#prevArea').append(img)
					var newRow = $('<tr>')
					var newCol1 = $('<td class="field"></td>')
					var newCol2 = $('<td>')
					var fileInput = $('<input type="file" name="photo" class="text"/>')
					fileInput.on('change', (evt) => {
						doPreview(evt.target, img)
					})
					var minusButton = $('<input type="button" value="-" class="minusbutton"/>')
					minusButton.on('click', (evt) => {
						newRow.remove()
						img.remove()
					})
					newCol2.append(fileInput).append(minusButton)
					tr.after(newRow.append(newCol1).append(newCol2))
				})
				
				$('#file').on('change', (evt) => {
					// doPreview(evt.target)
					doUpload(evt.target)
				})
			})

			function doUpload(fileInput) {
				if (fileInput.files[0]) {
					let formData = new FormData()
					formData.append(fileInput.name, fileInput.files[0])
					fetch('/api/photos/', {
						method: 'POST',
						body: formData
					})
						.then(resp => resp.json())
						.then(json => {
							if (json.code == 300001) {
								photoIds.push(json.photoid)
								fetchPhoto(json.url)
							} else {
								alert(json.message)
							}
						})
				} else {
					$('#housePhoto').attr('src', '/static/images/upload_photo.png')
				}
			}

			function fetchPhoto(url) {
				if (timerId) {
					clearTimeout(timerId)
				}
				fetch(url).then(resp => {
					if (resp.status == 200) {
						$('#housePhoto').attr('src', url)
					} else {
						timerId = setTimeout(() => { fetchPhoto(url) }, 3000)
					}
				})
			}
			
			function doPreview(fileInput) {
				var file = fileInput.files[0]
				if(/image\/\w+/.test(file.type)) {
					if(window.FileReader) {
						var fr = new FileReader()
						fr.onloadend = function() {
							$('#housePhoto').attr('src', this.result)
						}
						fr.readAsDataURL(file)
					}
				} else {
					alert("只能选择图片文件")
					source.value = ""
					target.attr('src', '')
				}
			}
		</script>
	</body>
</html>